<template>

    <vo-table ref="yuTable" :data="data.tableData.data" :cols="data.tableData.cols" :config="data.tableData.config" @fetch-data="filterData" @vue:mounted="filterData" >

      <template #tableForm>
          <tiny-form :model="data.formData" :rules="data.rules"  :inline="true"  style="height: 40px;" label-width="100px"  ref="formRef">
            <tiny-form-item label="字典查询" >
            <tiny-input v-model="data.dictInfo" placeholder="字典名称或编码"></tiny-input>
            </tiny-form-item>
            <tiny-form-item >
            <tiny-button  size="small"  type="info" @click="filterData"  ><vo-icon iconName="search"/>搜索</tiny-button>
            </tiny-form-item>
        </tiny-form>
      </template>
      <template #leftBar>
        <tiny-button-group>
          <tiny-button  type="success" ghost size="small"  @click="addDict"><vo-icon iconName="plus1" ></vo-icon>新增</tiny-button>
          <tiny-button  type="warning" ghost size="small" @click="cacheBtn"><vo-icon iconName="mount-storage" ></vo-icon>数据缓存</tiny-button>
          <tiny-button  type="danger" ghost size="small" @click="delBatch"><vo-icon iconName="delete"></vo-icon>删除</tiny-button>
        </tiny-button-group>
      </template>

      <template v-slot:dictCode="{row}">
        <tiny-button type="text" size="small" @click="dictShow(row)">{{ row.dictCode }} </tiny-button></template>
      <template v-slot:ruleStuts="{row}">
          <!-- {{ row.isStop==0?'启用':'禁用' }} -->
      <tiny-switch v-model="row.isStop" true-value="0" false-value="1" @change="changeIsStop(row)" show-text >
        <template #open>
        <span>是</span>
      </template>
      <template #close>
        <span>否</span>
      </template>
      </tiny-switch>
      </template>
      <template v-slot:cacheSolt="{row}">
       {{ row.isCache==1?'启用':'禁用' }}
        </template>
      <template v-slot:handleSlot="{row}">
        <tiny-button-group class="ml-4">
          <tiny-button size="mini" ghost type="success" @click="editBtn(row)">编辑</tiny-button>
          <tiny-button size="mini" ghost type="danger" @click="deleteRow(row)">删除 </tiny-button>
        </tiny-button-group>
      </template>
    </vo-table>
    <vo-dialog :data="data.dictItem.dialogConfig" v-model:isShow="data.dictItem.isShow">
      <dictEdit :editData="data.editData" v-model:isShow="data.dictItem.isShow" />
    </vo-dialog>
    <vo-dialog :data="data.dictShow.dialogConfig" v-model:isShow="data.dictShow.isShow">
      <DictShow :data="data.dictShow.data" v-model:isShow="data.dictShow.isShow" ></DictShow>
    </vo-dialog>

  
</template>

<script setup>
  import {reactive, ref, getCurrentInstance,onMounted,nextTick} from 'vue';
  import {Modal, TinySwitch } from '@opentiny/vue';
  import dictEdit from './DictItemEdit.vue';
  import DictShow from './DictShow.vue';
  const {proxy} = getCurrentInstance();
  const prefetchArgs = ref([{ property: 'name', sort: 'desc' }])
  const yuTable = ref(null);


  onMounted( ()=>{
    console.log(yuTable.value)
    if(yuTable.value){
      filterData()
    }
  
  })

  const data = reactive({
    tableData: {data: {}, cols: [], config:{dragRow:true,dragCell:true},tableArrts: {},content:{},isPage:1},
    ds:{},
    dictInfo: '',
    dictItem: {isShow: false, dialogConfig: {title: '',width:'60%'}},
    dictShow:{isShow: false,data:{},dialogConfig: {title: '',width:'60%'}},
    editData: {},
  });

  data.tableData.cols = [
    {type: 'index',title: '序号'},
    {type: 'selection',align:'left'},
    {title: '字典编码', key: 'dictCode', align: 'left', slot: 'dictCode'},
    {title: '字典名称', key: 'dictName', align: 'left'},
    {title: '数据来源', key: 'dataSource', align: 'center', edit: {editor: false, type: 'select', attrs: {}},  dictCode: 'dictDataSource'},
    {title: '是否树状结构', key: 'isTree', align: 'center', edit: {editor: false, type: 'select', attrs: {}},  dictCode: 'yesOrNo'},
    {
      title: '是否启用',
      key: 'isStop',
      tooltip: true,
      align: 'center',
      slot: 'ruleStuts',
      width: 100,
    },
    {
      title: '是否缓存',
      key: 'isCache',
      tooltip: true,
      align: 'center',
      slot: 'cacheSolt',
      width: 100,
    },
    {title: '更新日期', key: 'updateDate',align: 'left'},
    {title: '备注说明', key: 'remark',align: 'left'},
    {
      title: '操作',
      align: 'center',
      slot: 'handleSlot',
    },
  ];


  const filterData =  () => {
    let params = {dictInfo:data.dictInfo};
    var page = {page:yuTable.value.page()};
    params = Object.assign({}, params,page);
    proxy.$api.data.querySysDict(params).then(res=>{
    data.tableData.data=res
    })

  };
  const dictShow  = (row)=>{
    data.dictShow.isShow=true;
    data.dictShow.data= row;
  }


  const cacheBtn = () => {
    var selectRows = yuTable.value.grid().getSelectRecords(true);

    if (selectRows.length > 0) {
      Modal.confirm('是否缓存选中数据').then(res => {
        if (res == 'confirm') {
          proxy.$api.data.cacheSysDict(selectRows).then(res => {
            if (res.code != -1) {
              Modal.message({status: 'success', message: res.msg});
              yuTable.value.grid().remove(selectRows);
            } else {
              Modal.message({status: 'error', message: res.msg});
            }
          });
        }
      });
    } else {
      Modal.confirm('是否缓存所有字典数据').then(res => {
        if (res == 'confirm') {
          proxy.$api.data.cacheSysDict([]).then(res => {
            if (res.code != -1) {
              Modal.message({status: 'success', message: res.msg});
              yuTable.value.grid().remove(selectRows);
            } else {
              Modal.message({status: 'error', message: res.msg});
            }
          });
        }
      });
    }
  };
  const changeIsStop = async (value, row) => {};
  const addDict = () => {
    data.dictItem.isShow = true;
    data.dictItem.dialogConfig.title = '新增';
    data.editData = {dataSource:'0'};
  };

  const deleteRow = (row) => {

    Modal.confirm('此操作将永久删除该数据, 是否继续?').then(res => {
      if (res == 'confirm') {
        proxy.$api.data.delSysDict([row]).then(res => {
            if (res.code != -1) {
              Modal.message({status: 'success', message: res.msg});
              yuTable.value.grid().remove([row]);
            } else {
              Modal.message({status: 'error', message: res.msg});
            }
          });
      }
    })

    // let selectRows = yuTable.value.grid().getSelectRecords();
    // if (selectRows.length > 0) {
    //   Modal.confirm('此操作将永久删除该数据, 是否继续?').then(res => {
    //     if (res == 'confirm') {
    //       proxy.$api.data.delSysDict(selectRows).then(res => {
    //         if (res.code != -1) {
    //           Modal.message({status: 'success', message: res.msg});
    //           yuTable.value.grid().remove(selectRows);
    //         } else {
    //           Modal.message({status: 'error', message: res.msg});
    //         }
    //       });
    //     }
    //   });
    // } else {
    //   Modal.message({status: 'warning', message: '请选择删除数据'});
    // }
  };
  const editBtn = (row) => {
    data.dictItem.isShow = true;
    data.dictItem.dialogConfig.title = '修改';
    data.editData = row;
  };
</script>

<style lang="scss" scoped>
.button_style{
  padding: 0 5px;
}

</style>